{extend name="admin@public/basic" /}
{block name="style"}
<link rel="stylesheet" href="__STATIC__/css/admin/public.css" media="all"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/plugs/wangEditor-3.1.1/release/wangEditor.min.css"/>
<link href="__STATIC__/plugs/tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="__STATIC__/plugs/tag-it/css/tagit.ui-zendesk.css" rel="stylesheet" type="text/css">
<style>
    .toolbar {
        border: 1px solid #ccc;
    }

    .edit-bg {
        border: 1px solid #ccc;
        background-color: #f4f4f4;
        min-height: 300px;
    }
</style>
{/block}
{block name="cotent"}
<form class="layui-form form-width-99admin" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">文章标题</label>
        <div class="layui-input-block">
            <input type="text" id="title" lay-verify="title" autocomplete="off" placeholder="请输入文章标题" value="{$article.title|default=''}" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">文章分类</label>
        <div class="layui-input-block">
            <select id="category_id" lay-filter="category_id">
                {foreach category_list as $vo}
                <option value="{$vo.id|default=''}" {if !empty($article.category_id) and $article.category_id eq $vo.id}selected{
                /if}>{$vo.title|default=''}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">文章标签</label>
        <div class="layui-input-block">
            <input type="text" id="tag_list" lay-verify="tag_list" autocomplete="off" placeholder="请输入文章标签" class="layui-input" value="{$tag_title|default=''}">
        </div>
    </div>


    <div class="layui-form-item layui-row layui-col-xs12">
        <label class="layui-form-label">文章封面</label>
        <div class="layui-input-block" id="upload_image_div">
            <input type="hidden" id="cover_img" value="{$article.cover_img|default=''}">
            <div class="uploadimage" data-upload-image="one" data-upload-id="cover_img" data-upload-div="upload_image_div" style="background-image: url(__STATIC__/image/admin/upload.png);">
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文章描述</label>
        <div class="layui-input-block">
            <textarea id="describe" placeholder="请输入文章描述" class="layui-textarea">{$article.describe|default=''}</textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">文章内容</label>
        <div class="layui-input-block">
            <div id="editor1" class="toolbar">
            </div>
            <div id="editor2" class="edit-bg">
                {$article.content|default=''|raw}
            </div>
        </div>
    </div>

    {if !empty($article)}
    <input type="hidden" class="id" id="id" value="{$article.id|default=''}">
    {/if}

    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" id="submitBtn">提交</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" data-close="closeOpen">取消</button>
        </div>
    </div>

</form>
{/block}

{block name="script"}
<script type="text/javascript" src="/static/plugs/tag-it/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/tag-it/js/tag-it.js" charset="utf-8"></script>
<script type="text/javascript" src="__STATIC__/plugs/wangEditor-3.1.1/release/wangEditor.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate', 'upload'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , upload = layui.upload
            , laydate = layui.laydate;

        /**
         * 上传图片处理
         */
        $.form.imageRender('upload_image_div', 'one');

        /**
         *编辑器初始化
         */
        var E = window.wangEditor;
        var editor = new E('#editor1', '#editor2');
        editor.customConfig.uploadImgServer = "{:url('@admin/api.upload/image')}";
        editor.customConfig.uploadFileName = 'image';
        editor.customConfig.pasteFilterStyle = false;
        editor.customConfig.uploadImgMaxLength = 5;
        editor.customConfig.uploadImgHooks = {
            timeout: function (xhr, editor) {
                $.msg.error('上传超时！')
            },
            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            customInsert: function (insertImg, result, editor) {
                console.log(result);
                if (result.code == 0) {
                    url = result.url;
                    url.forEach(function (e) {
                        insertImg(e);
                    })
                } else {
                    $.msg.error(result.msg);
                }
            }
        }
        editor.customConfig.customAlert = function (info) {
            layer.msg(info);
        }
        editor.create();

        //预读取文章标签
        var sampleTags = JSON.parse('{$sample_tags|json_encode|raw}');

        /**
         * 文章标签处理
         */
        $('#tag_list').tagit({
            availableTags: sampleTags, //预读取
            removeConfirmation: true, //回车两次才删除
            // readOnly: true //只读
        });

        /**
         * 添加文章
         */
        $("#submitBtn").click(function () {
            if (editor.txt.text() == '') {
                $.msg.error('评论内容不可为空！');
                return false;
            }
            var data = {
                article_id: $('#id').val(),
                title: $('#title').val(),
                tag_list: $('#tag_list').val(),
                category_id: $('#category_id').val(),
                cover_img: $('#cover_img').val(),
                describe: $('#describe').val(),
                content: editor.txt.html(),
            };
            $.request.post('{:url("$thisRequest")}', data, function (res) {
                $.msg.success(res.msg, function () {
                    $.tool.reload('open');
                });
            });
            return false;
        });
    })

</script>
{/block}
